<template>
  <div id="posterNo2">
    <van-swipe :loop="false" :width="150">
      <van-swipe-item
        v-for="(item, index) in imgList"
        :key="index"
        style="margin-right: 0.2rem"
      >
        <img :src="item" alt="" class="swipeImg" @click="getIndex(index)" />
      </van-swipe-item>
    </van-swipe>

    <img
      src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/ceshi/posterNo1.png"
      alt=""
    />
    <img
      src="https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/ceshi/WechatIMG1115.png"
      alt=""
    />

    <div class="nowUse" @click="toCreatOrder">一元钱购买20元抵用券</div>
  </div>
</template>

<script>
import { ImagePreview, Toast } from "vant";
import req from "@/utils/index";
export default {
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
  data() {
    return {
      imgList: [
        "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/ceshi/tu01.png",
        "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/ceshi/tu02.png",
        "https://tsyx-rights-and-interests.oss-cn-hangzhou.aliyuncs.com/ceshi/tu03.png",
      ],
      goodsNo: "",
    };
  },
  methods: {
    //   大图
    getIndex(index) {
      ImagePreview({
        images: this.imgList,
        startPosition: index,
      });
    },
    // 去购买页面
    toCreatOrder() {
      if (this.goodsNo == "") {
        Toast("网络连接超时，请稍后再试");
        this.getGeSangQuan();
        return;
      }
      window.localStorage.setItem("whatBuy", 'water')
      this.$router.push({
        name: "creatOrder",
        query: {
          goodsNo: this.goodsNo,
          didPay: "noYet",
        },
      });
    },

    getGeSangQuan() {
      // 获取格桑泉
      req("get", "/qyHome/getVipGoods?goodsType=1", {}).then((res) => {
        window.localStorage.setItem("geSangQuanGoodsNo", res);
        this.goodsNo = res;
      });
    },
  },
  created() {
    this.getGeSangQuan();
  },
};
</script>

<style lang='scss' scoped>
#posterNo2 {
  text-align: center;
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
}
.swipeImg {
  width: 100%;
}
img {
  width: 100%;
  margin-top: 0.3rem;
}
.nowUse {
  width: 90%;
  margin: auto;
  padding: 0.3rem 0;
  box-sizing: border-box;
  border: 1px solid #c41e33;
  color: #c41e34;
  border-radius: 0.7rem;
  font-weight: 700;
  font-size: 0.4rem;
  margin-top: 0.5rem;
  text-align: center;
  margin-bottom: 1rem;
}
</style>